<template>
  <div class="container">
    <!-- 专业管理模块 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="card">
          <h3>课程能力映射表</h3>
          <el-table :data="courses" border>
            <el-table-column prop="name" label="课程名称"/>
            <el-table-column label="对应能力">
              <template #default="{row}">
                <el-tag v-for="ability in row.abilities" :key="ability">
                  {{ ability }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="card">
          <h3>课程分类管理</h3>
          <el-tree :data="courseCategories" :props="treeProps">
            <template #default="{ node, data }">
              <span class="custom-tree-node">
                <span>{{ node.label }}</span>
                <el-tag v-if="data.tags" v-for="tag in data.tags" :key="tag">
                  {{ tag }}
                </el-tag>
              </span>
            </template>
          </el-tree>
        </div>
      </el-col>
    </el-row>

    <!-- 能力画像模块 -->
    <div class="card">
      <h3>学生能力画像</h3>
      <div ref="radarChart" style="height:400px"></div>

      <el-tabs v-model="activeTab">
        <el-tab-pane label="个人画像">
          <el-select v-model="selectedStudent" placeholder="选择学生">
            <el-option v-for="s in students" :key="s.id" :label="s.name" :value="s.id"/>
          </el-select>
        </el-tab-pane>
        <el-tab-pane label="群体分析">
          <el-button @click="showClusterAnalysis">生成群体分类</el-button>
          <div ref="clusterChart" style="height:300px"></div>
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 教学指导模块 -->
    <div class="card">
      <h3>学业预警管理</h3>
      <el-table :data="warnings" style="width:100%">
        <el-table-column prop="name" label="学生"/>
        <el-table-column prop="type" label="预警类型"/>
        <el-table-column label="操作">
          <template #default="{row}">
            <el-button type="primary" @click="handleIntervention(row)">
              制定干预措施
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script setup>
// eslint-disable-next-line no-unused-vars
import { courseCategories } from './courseCategories'
// eslint-disable-next-line no-unused-vars
import { courses } from './courses.2'
// eslint-disable-next-line no-unused-vars
import { handleIntervention } from './handleIntervention'
import { initRadarChart } from './initRadarChart'
// eslint-disable-next-line no-unused-vars
import { radarChart } from './radarChart'
// eslint-disable-next-line no-unused-vars
import { selectedStudent } from './selectedStudent'
// eslint-disable-next-line no-unused-vars
import { students } from './students'
// eslint-disable-next-line no-unused-vars
import { warnings } from './warnings'

const onMounted = (param) => {

}
onMounted(() => {
  initRadarChart()
})
</script>
<style scoped>
.container {
  padding: 20px;
}
.card {
  margin-bottom: 20px;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.el-tag {
  margin-left: 10px;
}
</style>
